<template>
  <div id="app">
    <ElInputDevSelect
      id="machineGroupId"
      label="deviceName"
      type="dev"
      v-model="queryParams"
      :multiple="true"
    ></ElInputDevSelect>

    <!--
      valueFormat="object" 控制绑定的值类型是对象
      value-consists-of="LEAF_PRIORITY" 控制选中标签，但是展示当前标签的label，而是展示他的叶子节点集合

      :always-open="true" 默认下拉框一直处于打开状态 :defaultExpandLevel="Infinity" 加上这个属性，展开全部节点

      :flatten-search-results="false" 在搜索时，默认是false，则展示匹配结果的父节点；是true，则不展示匹配结果的子节点

      自定义键名称：当ajax返回的数据与treeselect要求的数据属性名称不一样时，就修改属性名（不使用API的话，就使用递归）
      <treeselect
      :options="options"
      :value="value"
      :normalizer="normalizer"
      />

      export default {
        data: () => ({
          value: null,
          options: [ {
            key: 'a',
            name: 'a',
            subOptions: [ {
              key: 'aa',
              name: 'aa',
            } ],
          } ],
          normalizer(node) {
           return {
              id: node.key,
              label: node.name,
              children: node.subOptions,
            }
          },
        }),
      }
     -->
    <treeselect
      v-model="value"
      :multiple="true"
      :options="options"
      valueFormat="object"
      value-consists-of="LEAF_PRIORITY"
      v-loading="isLoading"
      :flatten-search-results="false"
      :always-open="true"
      :defaultExpandLevel="Infinity"
      :normalizer="normalizer"
    >
      <!-- 自定义值标签 -->
      <div slot="value-label" slot-scope="{ node }">
        <i class="el-icon-s-home"></i>---{{ node.label }}
      </div>

      <!-- 自定义选项标签 -->
      <label slot="option-label" slot-scope="{ node }">
        <i class="el-icon-s-home" v-show="!node.isBranch"></i>
        {{ node.label }}
        <!-- {{ node.isBranch }} -->
      </label>
    </treeselect>

    <span>{{ value }}</span>
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import data from './data.js'

export default {
  // register the component
  components: { Treeselect },
  data () {
    return {
      value: null,
      options: data,
      isLoading: false, // 初始化loading状态为false
      queryParams: {},
      normalizer (node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children,
          isDisabled: node.isDisabled
        }
      }
    }
  },
  watch: {
    value (val) {
      console.log(val)
    }
  },
  created () {
    this.isLoading = true // 加载数据时设置loading为true
    recursion(this.options)
    setTimeout(() => {
      this.isLoading = false // 数据加载完成后设置loading为false
    }, 2000)
  },
  methods: {}
}

function recursion (arr) {
  arr.forEach((obj) => {
    if (obj.children && obj.children.length === 0) delete obj.children

    if (obj.children) return recursion(obj.children)
    return arr
  })
}
</script>

<style scoped lang="less">
// tree控制高度样式，修改的是vue-treeselect__multi-value
// ::v-deep .vue-treeselect__multi-value {
/deep/ .vue-treeselect__multi-value {
  max-height: 200px;
  overflow: auto;
}
</style>
